<template>
  <div>
    <ul>
      <li v-for="item in frontList" :key="item.id" @click="jumpTo(item.id)">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      frontList: [
        {
          id: 1,
          title: 'js'
        },
        {
          id: 2,
          title: 'vue'
        },
        {
          id: 3,
          title: '小程序'
        }
      ]
    }
  },
  methods: {
    jumpTo (id) {
      // 编程式导航通过js跳转
      this.$router.push('/detail/' + id)
      // this.$router.push({ path: '/detail/' + id })
      // this.$router.push({ name: 'Detail', params: { id: id } })

      // 下面这种path写成对象的写法是错误的，不能写params对象，但是可以写query
      // this.$router.push({ path: '/detail', params: { id: id } })
    }
  }
}
</script>

<style>
</style>
